<template>
  <view class="mask-box">
    <view class="bzb plate-box">
      <view class="flex-jcsb flex-vcenter title">
        <text class="title-text">请录入车牌号</text>
        <view @click="cancel">
          <uni-icons type="closeempty" size="30"></uni-icons>
        </view>
      </view>
      <view class="plate-code-box">
        <view class="left-box">
          <view :class="curCodeIndex === 0 ? 'cur-code' : ''" class="code-item left" @click="focusCode(0)">
            {{ code0 }}
          </view>
          <view :class="curCodeIndex === 1 ? 'cur-code' : ''" class="code-item right" @click="focusCode(1)">
            {{ code1 }}
          </view>
        </view>
        <view class="flex-center" style="font-weight: 900; color: #999">·</view>
        <view class="right-box">
          <view :class="curCodeIndex === 2 ? 'cur-code' : ''" class="code-item" @click="focusCode(2)">
            {{ code2 }}
          </view>
          <view :class="curCodeIndex === 3 ? 'cur-code' : ''" class="code-item" @click="focusCode(3)">
            {{ code3 }}
          </view>
          <view :class="curCodeIndex === 4 ? 'cur-code' : ''" class="code-item" @click="focusCode(4)">
            {{ code4 }}
          </view>
          <view :class="curCodeIndex === 5 ? 'cur-code' : ''" class="code-item" @click="focusCode(5)">
            {{ code5 }}
          </view>
          <view :class="curCodeIndex === 6 ? 'cur-code' : ''" class="code-item" @click="focusCode(6)">
            {{ code6 }}
          </view>
        </view>
      </view>
      <view class="flex-center btn-confirm" :class="isValid ? '' : 'disabled'" @click="confirm">确 认</view>
    </view>
    <view class="keyboard">
      <view v-show="curKeyboard === 'province'" class="keymap-province">
        <view class="key" v-for="(item, index) in provinceArr" :key="index" @click="provinceInput(item)">
          {{ item }}
        </view>
      </view>
      <view v-show="curKeyboard === 'code'" class="keymap-code">
        <view class="row-ten-col">
          <view
            class="key"
            :class="curCodeIndex === 1 ? 'disabled' : ''"
            v-for="(item, index) in numRow"
            :key="index"
            @click="onInput(item)"
          >
            {{ item }}
          </view>
        </view>
        <view class="row-ten-col">
          <view class="key" v-for="(item, index) in letterTopRow" :key="index" @click="onInput(item)">
            {{ item }}
          </view>
          <view class="key" :class="[6, 7].includes(curCodeIndex) ? '' : 'disabled'" @click="onInput('港')">港</view>
          <view class="key" :class="[6, 7].includes(curCodeIndex) ? '' : 'disabled'" @click="onInput('澳')">澳</view>
        </view>
        <view class="row-ten-col">
          <view class="key" v-for="(item, index) in letterMidRow" :key="index" @click="onInput(item)">
            {{ item }}
          </view>
          <view class="key" :class="[6, 7].includes(curCodeIndex) ? '' : 'disabled'" @click="onInput('挂')">挂</view>
        </view>
        <view class="row-last">
          <view></view>
          <view class="key" v-for="(item, index) in letterBottomRow" :key="index" @click="onInput(item)">
            {{ item }}
          </view>
          <view></view>
          <view class="flex-center key" style="background-color: #abb3bd" @click="backspace">
            <img :src="iconDelete" alt="del" class="icon-delete" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import iconDelete from '@/static/saleIcon/Icon/del.png';
import { computed, ref, Ref } from 'vue';
// static
const provinceArr = [
  '京',
  '津',
  '沪',
  '渝',
  '辽',
  '吉',
  '黑',
  '冀',
  '晋',
  '苏',
  '浙',
  '皖',
  '闽',
  '赣',
  '鲁',
  '豫',
  '鄂',
  '湘',
  '粤',
  '琼',
  '川',
  '贵',
  '云',
  '陕',
  '甘',
  '青',
  '宁',
  '新',
  '藏',
  '桂',
  '蒙',
];
const numRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
const letterTopRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P'];
const letterMidRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
const letterBottomRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M'];
// data
const curKeyboard: Ref<'province' | 'code'> = ref('province');
const curCodeIndex = ref(0);
const code0 = ref('');
const code1 = ref('');
const code2 = ref('');
const code3 = ref('');
const code4 = ref('');
const code5 = ref('');
const code6 = ref('');
const isValid = computed(
  () => ![code0.value, code1.value, code2.value, code3.value, code4.value, code5.value, code6.value].includes(''),
);

const emit = defineEmits(['cancel', 'confirm']);

function focusCode(code) {
  if (code === 0) {
    curKeyboard.value = 'province';
  } else {
    curKeyboard.value = 'code';
  }
  if (code < 7) {
    curCodeIndex.value = code;
  }
}
function provinceInput(province) {
  code0.value = province;
  focusCode(1);
}
function onInput(value: string) {
  setValue(value);
  focusCode(curCodeIndex.value + 1);
}
function setValue(value: string) {
  switch (curCodeIndex.value) {
    case 1:
      code1.value = value;
      break;
    case 2:
      code2.value = value;
      break;
    case 3:
      code3.value = value;
      break;
    case 4:
      code4.value = value;
      break;
    case 5:
      code5.value = value;
      break;
    case 6:
      code6.value = value;
      break;
  }
}
function backspace() {
  setValue('');
  focusCode(curCodeIndex.value - 1);
}
function cancel() {
  emit('cancel');
}
function confirm() {
  if (isValid.value) {
    const plate = `${code0.value}${code1.value}${code2.value}${code3.value}${code4.value}${code5.value}${code6.value}`;
    emit('confirm',plate);
  }
}
</script>

<style scoped lang="less">
.mask-box {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-rows: repeat(2, 50vh);
  align-items: end;
  justify-items: center;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
}

.plate-box {
  width: 690rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 5px;

  .title {
    font-size: 20px;
    color: #333333;
  }

  .plate-code-box {
    padding: 60rpx 0;
    display: grid;
    grid-template-columns: 160rpx 40rpx 430rpx;
    grid-template-rows: 76rpx;
    font-weight: bold;

    .left-box {
      display: grid;
      grid-template-columns: 70rpx 70rpx;
      column-gap: 20rpx;

      .code-item {
        border: 2rpx solid #979797;
        border-radius: 5px;
        padding: 16rpx;
        text-align: center;

        &.cur-code {
          border: 2rpx solid #ff5000;
        }
      }
    }

    .right-box {
      display: grid;
      grid-template-columns: repeat(5, 70rpx);
      column-gap: 20rpx;

      .code-item {
        padding: 16rpx;
        border: 2rpx solid #979797;
        border-radius: 5px;
        text-align: center;

        &.cur-code {
          border-color: #ff5000;
          border-style: solid;
        }
      }
    }
  }
}

.keyboard {
  background-color: rgba(210, 213, 219, 90);
  padding-bottom: 32rpx;

  .keymap-province {
    padding: 20rpx;
    display: grid;
    grid-template-rows: repeat(4, 72rpx);
    grid-template-columns: repeat(8, 80rpx);
    gap: 20rpx 10rpx;
  }

  .keymap-code {
    padding: 20rpx 10rpx;
    .row-ten-col {
      display: grid;
      grid-template-rows: 72rpx;
      grid-template-columns: repeat(10, 64rpx);
      column-gap: 10rpx;
      margin-bottom: 20rpx;
    }
    .row-last {
      display: grid;
      grid-template-rows: 72rpx;
      grid-template-columns: repeat(8, 64rpx) 32rpx 96rpx;
      column-gap: 10rpx;
    }
  }
}

.key {
  font-size: 32rpx;
  color: #353535;
  line-height: 72rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 1rpx 2rpx 0 #979797;
  border-radius: 5px;

  &.disabled {
    background-color: #f7f7f7;
    color: #ccc;
  }

  .icon-delete {
    width: 48rpx;
    height: 48rpx;
  }
}

.btn-confirm {
  height: 80rpx;
  border-radius: 5px;
  font-size: 32rpx;
  word-spacing: 48rpx;
  background-color: #1b91ff;
  color: white;

  &.disabled {
    background-color: #eee;
    color: #999;
  }
}
</style>
